<!-- 子菜单组件 递归循环 -->
<template>
    <MenuItem :key="item.router" :name="item.router" v-if="!item.children&&!item.hide" :to="item.router" style="display: flex; align-items: center;">
        <Icon :type="item.icon" size="16"></Icon><div class="menu_name">{{ $t(item.name) }}</div>
    </MenuItem>
    <Submenu :name="item.id" v-else-if="!item.hide">
        <template #title>
            <Icon :type="item.icon" size="16"></Icon>
            <div class="menu_name">{{ $t(item.name) }}</div>
        </template>
        <template v-for="(option, index) in item.children" :key="index">
            <my-item v-if="option.children" :item="option" />
            <MenuItem v-else :name="option.router" :to="option.router">
                <Icon :type="option.icon" size="16"></Icon><div class="menu_name">{{ $t(option.name) }}</div>
            </MenuItem>
        </template>
    </Submenu>
</template>

<script>
export default {
    name: 'MyItem',
};
</script>
<script setup>
defineProps({
    item: {
        type: Object
    },
});
</script>

<style scoped lang="scss">
.isLeft {
    padding-left: 10px;
}

.ivu-menu-item {
    display: flex;
    align-items: center;
    padding: 10px 24px 10px;
    i {
        margin-right: 10px;
    }
}
:deep(.ivu-menu-submenu-title) {
    display: flex;
    // justify-content: space-between;
    align-items: center;
    padding: 10px 24px 10px;
    
}
.menu_name {
        width: 100px;
    }
</style>